<template>
  <div class="container" style="height: 100vh;width: 300px;padding: 20px;box-sizing: border-box;width: 100%;">
    <header>
      <MBreadcrumb :item="breadcrumbItem" />
    </header>
    <main>
      <MTitle class="title">
        <template #left>
          订单信息
        </template>
      </MTitle>
      <table id="attributeTable" class="mtable">
        <tr v-for="(obj, index) in MListItem" :key="index" class="mtr">
          <td class="field">{{ obj.field }}</td>
          <td class="value">
            <MInput v-model="ProductInfo[index]" style="font-size: 12px;width: 100%" disabled></MInput>
          </td>
        </tr>

      </table>
      <MTitle class="title">
        <template #left>
          采购方信息
        </template>
      </MTitle>
      <table id="attributeTable" class="mtable">
        <tr v-for="(obj, index) in MListItem1" :key="index" class="mtr">
          <td class="field">{{ obj.field }}</td>
          <td class="value" v-if="String(obj.field) != '验收标准'&&String(obj.field) != '交货周期'">
              <MInput v-model="ProductInfo1[index]" style="font-size: 12px;width: 100%" :disabled="isSupplier"></MInput>
          </td>
          <td class="value" v-if="String(obj.field) == '交货周期'">
              <MSelect v-model="ProductInfo1[index]" :options="[{value:'一周',text:'一周'},{value:'二周',text:'二周'},{value:'三周',text:'三周'},{value:'四周',text:'四周'}]" :value="ProductInfo1[index]" id="ruletype"
                    required style="flex: 1 1 200px;width: 100%;" :disabled="isSupplier">
                  </MSelect>
          </td>
          <td class="value" v-if="String(obj.field) == '验收标准'" style="height:80px">
              <textarea v-model="ProductInfo1[index]" required
                style="width: 100%;border:1px solid #d2d2d2;border-radius: 5px;resize: none;padding: 5px;box-sizing: border-box;font-size: 12px;"
                rows="5" :disabled="isSupplier">
              </textarea>
          </td>
        </tr>
      </table>
      <MTitle class="title">
        <template #left>
          供应方信息
        </template>

      </MTitle>
      <form>
        <table id="attributeTable" class="mtable">
          <tr v-for="(obj, index) in MListItem2" :key="index" class="mtr" disabled>
            <td class="field">{{ obj.field }}</td>
            <td class="value">
              <MInput v-model="ProductInfo2[index]" style="font-size: 12px;width: 100%" :disabled="!isSupplier">
              </MInput>
            </td>

          </tr>
        </table>
      </form>
      <MTitle class="title" v-if="!isSupplier">
        <template #left>
          签字盖章
        </template>

      </MTitle>
      <form>
        <table id="attributeTable" class="mtable" v-if="!isSupplier">
          <tr class="mtr">
            <td class="field">采购签字</td>
            <td class="value">
              <MInput v-model="ProductInfo3" style="font-size: 12px;width: 100%"></MInput>
            </td>
          </tr>
        </table>
      </form>
    </main>
    <footer>
      <div style="text-align: center;margin-top: 20px;display: flex;justify-content: space-around;" v-if="!isDisable">
        <div v-if="!isSupplier">
          <MButton type="cancel" @click="confirmOrder1" v-if="!isConfirm">确认</MButton>
          <MButton @click="printOrder" v-if="isConfirm">打印</MButton>
        </div>
        <div v-if="isSupplier">
          <MButton @click="confirmOrder">确认</MButton>
        </div>


      </div>
    </footer>
    <MMessage v-if="toastVisible" :message="toastMessage" :state="toastState" />

  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import MBreadcrumb from "../../components/MBreadcrumb.vue"
import MTitle from "../../components/MTitle.vue"
//import MList from "../../components/MList.vue"
import MButton from "../../components/MButton.vue"
import MInput from "../../components/MInput.vue"
import MMessage from '../../components/MMessage.vue';
import MSelect from '../../components/MSelect.vue';

//import MTag from "../../components/MTag.vue"
import axios from "../../axios/axios"
export default {
  name: "OrderPrint",
  components: {
    MBreadcrumb,
    MTitle,
    MSelect,
    MButton,
    MInput,
    MMessage,
    //MTag
    //MIcon
  },
  setup() {
    const toastVisible = ref(false)
    const toastMessage = ref("")
    const toastState = ref("success")
    const breadcrumbItem = ref(
      {
        key: "0",
        title: '赋码管理',
        children: {
          key: "0-0",
          title: '打印合同',
        }
      })
    //const userId="12121"
    const MListItem = ref(
      [
        { "field": "订单编号", },
        { "field": "下单日期", },
        { "field": "产品型号", },
        { "field": "单价", },
        { "field": "数量", },
        { "field": "总价", },
      ]
    )
    const MListItem1 = ref(
      [
        { "field": "公司名称", },
        { "field": "地址", },
        { "field": "联系人", },
        { "field": "联系电话", },
        { "field": "电子邮箱", },
        { "field": "交货时间", },
        { "field": "安装要求", },
        { "field": "验收标准", }
      ]
    )
    const MListItem2 = ref(
      [
        { "field": "公司名称", },
        { "field": "地址", },
        { "field": "联系人", },
        { "field": "联系电话", },
        { "field": "电子邮箱", },
      ]
    )
    const orderInfo = ref({})
    const ProductInfo = ref([])
    const ProductInfo1 = ref([])
    const ProductInfo2 = ref(["", "", "", "", ""])
    const ProductInfo3 = ref("")
    const tagItems = ref([])
    const params = ref([])
    const userId = ref("")
    const isConfirm = ref(false)
    const isPart = ref("0")
    const isDisable = ref(false)
    const isSupplier = ref(false)
    const confirmOrder1 = () => {
      axios.get("/step/sendstep?type=confirmOrder&userId=" + params.value.get('userId') + "&trainingId=" + params.value.get('trainingId')).then(res => {
        if (res.data.Code === "200") {
          isConfirm.value = true
          messageShow("已确认", "success")
        }
      })
      if (orderInfo.value.issignbuy == "0") {
        axios.post('/order/updatebyid', {
          id: orderInfo.value.id,
          issignbuy: "1",
        })
          .then(response => {
            if (response.data.Code == "200") {
              messageShow("已确认", "success")
            } else {
              messageShow(response.data.Msg, "warning")
            }
          })
      }

    }
    const confirmOrder = () => {
      if (chectValue()) {
        axios.post('/order/updatebyid', {
          id: orderInfo.value.id,
          suppliercompany: ProductInfo2.value[0],
          suppliercompanyaddress: ProductInfo2.value[1],
          suppliercompanycontacts: ProductInfo2.value[2],
          suppliercompanyphone: ProductInfo2.value[3],
          suppliercompanyemail: ProductInfo2.value[4],
          orderstate: "1"
        })
          .then(response => {
            if (response.data.Code == "200") {
              axios.get("/step/sendstep?type=confirmOrder&userId=" + params.value.get('userId') + "&trainingId=" + params.value.get('trainingId')).then(res => {
                if (res.data.Code === "200") {
                  isConfirm.value = false
                  messageShow("已确认", "success")
                }
              })

            } else {
              messageShow(response.data.Msg, "warning")
            }
          })
      }
    }
    const printOrder = () => {
      axios.get("/step/sendstep?type=orderPrint&userId=" + params.value.get('userId') + "&trainingId=" + params.value.get('trainingId')).then(() => {
        messageShow("开始打印", "success")
      })

    }
    const chectValue = () => {
      const hasEmpty = ProductInfo2.value.some(function (item, index) {
        if (item === "") {
          messageShow("请输入供应方" + MListItem2.value[index].field, "warning");
          return true;
        }
        return false;
      });

      // if (ProductInfo3.value !== ProductInfo1.value[2]) {
      //   messageShow("请确认签字人", "warning");
      //   return false;
      // }

      return !hasEmpty;
    }
    const messageShow = (msg, state) => {
      toastMessage.value = msg;
      toastVisible.value = true;
      toastState.value = state
      // 使用 setTimeout 模拟 Toast 组件内部的定时器功能（仅用于演示）
      // 在实际使用中，你应该依赖 Toast 组件内部的定时器
      setTimeout(() => {
        toastVisible.value = false;
      }, 3000); // 与 Toast 组件中的 duration 属性保持一致
    }
    onMounted(() => {
      // 获取 URL 参数
      const param = new URLSearchParams(window.location.search);
      params.value = param
      if (param.has('userId')) {
        userId.value = param.get('userId');
      }
      if (param.has('isDisable')) {
        isDisable.value = param.get('isDisable') === "true"
      }
      if (param.get('targetPageId') === "partOrderPrint") {
        isPart.value = "1"
        isSupplier.value = true
      }
      if (param.get('targetPageId') === "supplierInfo") {
        isSupplier.value = true
      }
      axios.get('/order/select?userId=' + param.get('userId') + "&trainingId=" + param.get('trainingId') + "&isPart=" + isPart.value)
        .then(response => {
          var data = response.data.Data
          orderInfo.value = data
          var p = [
            data.ordernumber,
            data.ordertime,
            data.productmodel,
            data.goodsprice,
            data.goodsnumber,
            data.totalprice,
          ]
          var p1 = [
            data.companyname,
            data.companyaddress,
            data.contactsname,
            data.contactsphone,
            data.contactsemail,
            data.deliverytime,
            data.installdemand,
            data.checkstandard,
          ]
          var p2 = [
            data.suppliercompany,
            data.suppliercompanyaddress,
            data.suppliercompanycontacts,
            data.suppliercompanyphone,
            data.suppliercompanyemail,
          ]
          ProductInfo.value = p
          ProductInfo1.value = p1
          ProductInfo2.value = p2

        })
    });
    return {
      toastVisible,
      toastMessage,
      toastState,
      breadcrumbItem,
      MListItem,
      tagItems,
      ProductInfo,
      ProductInfo1,
      MListItem1,
      MListItem2,
      ProductInfo2,
      ProductInfo3,
      isConfirm,
      isDisable,
      isSupplier,
      confirmOrder,
      confirmOrder1,
      printOrder

    };
  },
};
</script>

<style scoped>
.title {
  margin-top: 30px;
}

.title1 {
  margin-top: 20px;
}

.mtr {
  display: flex;
  flex-wrap: wrap;
  /* 允许子元素换行 */
  align-items: flex-start;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  text-align: center;
  height: 10%;
  padding: 10px 0;
}

main {
  flex: 1;
}

.mtable {
  width: 100%;
  font-size: 13px;

}

.field {
  text-align: left;
  padding: 4px 0;
  flex: 1 1 60px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  /* 确保内容可以缩小 */
  height: 26px;
  line-height: 26px;
}

.value {
  text-align: right;
  padding: 4px 0;
  flex: 1 1 190px;
  word-break: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  min-width: 0;
  height: 26px;
  line-height: 26px;
  /* 确保内容可以缩小 */
}
</style>
